<template>
  <div class="app-container" ref="appContainer">
    <PropTable
      ref="tableData"
      :loading="loading"
      :columns="column"
      :data="data"
      @reset="reset"
      @onSubmit="onSubmit"
      @add="addOrEdit"
      @change="changeState"
    >
      <template v-slot:operation="scope">
        <el-button type="primary" size="small" icon="View" @click="gotoInfo(scope.row)">
          详情
        </el-button>
        <el-button type="primary" size="small" icon="Edit" @click="addOrEdit(scope.row)">
          编辑
        </el-button>
        <!-- <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
          删除
        </el-button> -->
      </template>
    </PropTable>
    <AddOrEditDrawer ref="addOrEditRef" @getData="reset"></AddOrEditDrawer>
    <CommunityUpdataDrawer ref="communityUpdataRef" @getData="reset"></CommunityUpdataDrawer>
  </div>
</template>
<script lang="ts" setup name="comprehensive">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    postCommunityPageLike,
    putCommunityUpdate,
  } from '@/api/controller/community-controller/index'
  import PropTable from '@/components/Table/PropTable/index.vue'
  import CommunityUpdataDrawer from './components/communityUpdataDrawer.vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const loading = ref(true)
  const appContainer = ref(null)
  const column = [
    { name: 'communityName', label: '小区名称', inSearch: true, valueType: 'input', width: 180 },
    { name: 'city', label: '市', width: 120, inSearch: true, valueType: 'input' },
    { name: 'area', label: '区', width: 120 },
    { name: 'communityAddress', label: '地址', width: 220 },
    { name: 'status', label: '状态', itemIf: true, width: 100 },
    { name: 'position', label: '定位', width: 120 },
    { name: 'remark', label: '备注' },
    { name: 'operation', slot: true, fixed: 'right', width: 180, label: '操作' },
  ]
  const data = ref(null)
  const tableData = ref(null)
  const communityUpdataRef = ref()
  const addOrEdit = async (row?) => {
    communityUpdataRef.value.show(row)
  }

  const gotoInfo = (row) => {
    router.push({
      name: 'communityInfo',
      state: { id: row.id, name: row.communityName },
    })
  }
  // 删除当前项
  const del = async (row) => {
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        const result = await deleteSysUserDel({ id: row.id })
        if (result.code === 200) {
          loading.value = true
          const result = await postCommunityPageLike(tableData.value?.formInline)
          data.value = result.data
          loading.value = false
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }
  //重置搜索条件
  const reset = async () => {
    try {
      loading.value = true
      let pageInfo = {
        pageNum: 1,
        pageSize: 15,
      }
      const result = await postCommunityPageLike(pageInfo)
      data.value = result.data
    } finally {
      loading.value = false
    }
  }
  //搜索
  const onSubmit = async (val) => {
    try {
      loading.value = true
      const result = await postCommunityPageLike(val)
      data.value = result.data
    } finally {
      loading.value = false
    }
  }
  //初始化
  onMounted(async () => {
    try {
      loading.value = true
      let pageInfo = {
        pageNum: 1,
        pageSize: 15,
      }
      const result = await postCommunityPageLike(pageInfo)
      data.value = result.data
    } finally {
      loading.value = false
    }
  })

  //改变小区状态
  const changeState = async (id, status, str) => {
    const data = {
      id: id,
      status: status,
    }
    const res = await putCommunityUpdate(data, { loading: true })
    if (res.code === 200) {
      if (status) {
        ElMessage.success('启用成功')
      } else {
        ElMessage.success('禁用成功')
      }
    }
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
